import { Checkbox } from "@ark-ui/solid";
import { CheckIcon } from "lucide-solid";

export default function BasicCheckbox() {
  return (
    <Checkbox.Root class="flex items-center gap-3 cursor-pointer">
      <Checkbox.Control class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-hover:border-gray-400 dark:bg-gray-900 dark:border-gray-600 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 dark:data-hover:border-gray-400 transition-all duration-200 flex items-center justify-center">
        <Checkbox.Indicator>
          <CheckIcon class="w-3.5 h-3.5 text-white" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
        Accept terms and conditions
      </Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  );
}
